<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户数据展示</title>
    <style>
        table {
            width: 50%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <button id="fetchDataButton">获取用户数据</button>
</div>
<table id="userDataTable">
    <thead>
    <tr>
        <th>用户名</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据将在这里动态渲染 -->
    </tbody>
</table>

<script>
    document.getElementById('fetchDataButton').addEventListener('click', function() {
        // 创建 FormData 对象
        const formData = new FormData();
        // 如果后端需要特定的表单字段，可以在这里添加
        // formData.append('key', 'value');

        // 发起 POST 请求，使用 form-data 格式
        fetch('http://localhost:8001/api/users/selectAllUsers', {
            method: 'POST',
            body: formData // 使用 FormData 对象作为请求体
        })
            .then(response => response.json())
            .then(data => {
                // 清空表格内容
                const tableBody = document.querySelector('#userDataTable tbody');
                tableBody.innerHTML = '';

                // 检查返回的数据是否正确
                if (data.code === '200' && data.data) {
                    // 动态渲染表格
                    data.data.forEach(user => {
                        const row = document.createElement('tr');
                        const cell = document.createElement('td');
                        cell.textContent = user.username;
                        row.appendChild(cell);
                        tableBody.appendChild(row);
                    });
                } else {
                    alert('获取数据失败：' + data.msg);
                }
            })
            .catch(error => {
                console.error('请求失败:', error);
                alert('请求失败，请检查后端服务是否正常运行');
            });
    });
</script>
</body>
</html>